<template>
  <div class="myNav">
    <!-- 最顶部导航 -->
    <nav class="center">
      <ul>
        <li>
          <router-link to="/" v-if="$store.state.userInfo.token"
            ><i class="iconfont icon-yonghu"></i
            >{{ $store.state.userInfo.account }}</router-link
          >

          <router-link to="/login" v-else> 请先登录 </router-link>
        </li>
        <li>
          <router-link
            to="/login"
            v-if="$store.state.userInfo.token"
            @click="$store.commit('removeUserInfo')"
            >退出登录</router-link
          >
          <router-link to="/" v-else> 免费注册 </router-link>
        </li>
        <li><router-link to="/">我的订单</router-link></li>
        <li><router-link to="/">会员中心</router-link></li>
        <li><router-link to="/">帮助中心</router-link></li>
        <li><router-link to="/">关于我们</router-link></li>
        <li>
          <router-link to="/"
            ><i class="iconfont icon-shouji"></i> 手机版</router-link
          >
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "myNav",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss">
/* 如果不想样式污染  就加个scoped */
.myNav {
  background-color: #333;
  nav {
    width: 1240px;
    margin: 0 auto;
  }
  ul {
    display: flex;
    height: 53px;
    justify-content: flex-end;
    align-items: center;
    background-color: #333;
    li {
      padding: 0 20px;
      margin-left: -1px;
      border-left: 1px solid #666666;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 14px;
      a {
        color: #adb3bb;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:nth-child(1) {
        border-left: none;
      }
      &:hover a {
        color: #27ba9b;
        cursor: pointer;
      }
    }
  }
}
</style>